//查询所有考试
<template>
	<div class="exam">
		<el-button @click="addGrade()" type="primary">添加考试</el-button>
		<el-col :span="6" style="float: right;">
			<!-- <el-form-item label="输入标题"> -->
			<el-input v-model="keywords" placeholder="请输入考试名称">
				<el-button slot="append" icon="el-icon-search" id="search" @click="getExamInfo"></el-button>
			</el-input>
			<!-- </el-form-item> -->
		</el-col>
		<div style="height: 10px;"></div>
		<el-table :data="pagination.records" border>
			<el-table-column prop="examId" label="考试编号"></el-table-column>
			<el-table-column prop="examName" label="考试名称"></el-table-column>
			<el-table-column prop="examBegin" label="考试开始时间" sortable=""></el-table-column>
			<el-table-column prop="examTime" label="考试时长" sortable=""></el-table-column>
			<el-table-column prop="exampaper.paperId" label="试卷编号" sortable=""></el-table-column>
			<el-table-column fixed="right" width="260%" label="操作">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="showPaper(scope.row.exampaper.paperId)">批改</el-button>
					<el-button @click="edit(scope.row.examId)" type="primary" size="small">编辑</el-button>
					<el-button @click="deleteRecord(scope.row.examId)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[5, 10, 20]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>
		<!-- 编辑对话框-->
		<el-dialog title="编辑试卷信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="考试编号">
						<el-input v-model="form.examId" readonly="readonly"></el-input>
					</el-form-item>
					<el-form-item label="考试名称">
						<el-input v-model="form.examName"></el-input>
					</el-form-item>
					<el-form-item label="考试时间">
						<el-col :span="11">
							<el-date-picker type="datetime" placeholder="选择日期" v-model="form.examBegin" style="width: 100%;"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="考试时长">
						<el-input v-model="form.examTime"></el-input>
					</el-form-item>
					<el-form-item label="试卷编号">
						<el-input v-model="form.exampaper.paperId"></el-input>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑对话框2-->
		<el-dialog title="添加试卷信息" :visible.sync="d" width="30%" :before-close="handleClose">
			<section class="add">
				<el-form ref="form1" :model="form1" label-width="80px">
					<el-form-item label="考试名称">
						<el-input v-model="form1.examName"></el-input>
					</el-form-item>
					<el-form-item label="考试时间">
						<el-col :span="11">
							<el-date-picker type="datetime" placeholder="选择日期" v-model="examBegin" style="width: 100%;"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="考试时长">
						<el-input v-model="form1.examTime"></el-input>
					</el-form-item>
					<el-form-item label="试卷编号">
						<el-input v-model="form1.exampaper.paperId"></el-input>
					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="d = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 查看考试对应的试卷列表-->
		<el-dialog title="试卷信息" :visible.sync="showdialogVisible" width="80%" :before-close="handleClose">
			<section class="add">
				<el-table :data="paginations.data" border>
					<el-table-column fixed="left" prop="topicId" label="题目编号"></el-table-column>
					<el-table-column fixed="left" prop="topicAnswer" label="标准答案"></el-table-column>
					<el-table-column prop="analysis" label="题目解析"></el-table-column>
					<el-table-column prop="topicScore" label="题目总分"></el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="small" @click="editPaper(scope.row.topicId)">改卷</el-button>
						</template>
					</el-table-column>
				</el-table>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showdialogVisible = false">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog title="试卷信息" :visible.sync="paperdialogVisible" width="95%" :before-close="handleClose">
			<el-table :data="paginationss.records" border>
				<el-table-column property="answerId" label="答题编号"></el-table-column>
				<el-table-column property="userId" label="学生编号"></el-table-column>
				<el-table-column property="topicAnswer.topicAnswer" label="标准答案"></el-table-column>
				<el-table-column property="answerContent" label="学生答案"></el-table-column>
				<el-table-column label="评分">
					<template slot-scope="scope">
						<el-input-number v-model="scope.row.score" @change="handleChange" :min="0" :max="10" label="描述文字"></el-input-number>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="pingFen(scope.row.answerId,scope.row.score)">确定</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginationss.current"
			 :page-sizes="[5, 10, 20]" :page-size="paginationss.size" layout="total, sizes, prev, pager, next, jumper" :total="paginationss.total"
			 class="page">
			</el-pagination>
			<div slot="footer" class="dialog-footer">
				<el-button @click="paperdialogVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	const axios = require('axios');
	export default {
		data() {
			return {
				form: {exampaper:{paperId:''}}, //保存点击以后当前试卷的信息
				form1: {exampaper:{paperId:''}}, //添加点击以后当前试卷的信息
				form2: {exampaper:{paperId:''}}, //批改试卷
				pagination: { //分页后的考试信息
					current: 1, //当前页
					total: null, //记录条数
					size: 5 //每页条数
				},
				paginations: {
					current: 1, //当前页
					total: null, //记录条数
					size: 5 //每页条数
				},
				paginationss: {
					current: 1, //当前页
					total: null, //记录条数
					size: 5 //每页条数
				},
				list:{},
				dialogVisible: false,
				d: false,
				keywords: '', //查询关键字
				showdialogVisible: false,
				paperdialogVisible: false,
				gridData: [],
				rightHeader: [{
						label: '编码',
						key: 'code'
					},
					{
						label: '姓名',
						key: 'name'
					},
					{
						label: '权限描述',
						key: 'description'
					}
				],
        examBegin : ''
			}
		},
		created() {
			this.getExamInfo()
			// this.getAnwerInfo()
		},
		methods: {
			edit(examId) { //编辑试卷
				this.dialogVisible = true
				axios(`/api/examId/${examId}`).then(res => { //根据试卷id请求后台
					if (res.data.code == 200) {
						this.form = res.data.data
					}
				})
			},
			handleClose(done) { //关闭提醒
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					}).catch(_ => {});
			},
			submit() { //提交修改后的试卷信息
				this.dialogVisible = false
				axios({
					url: '/api/exam/upd',
					method: 'post',
					data: {
						...this.form
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({ //成功修改提示
							message: '更新成功',
							type: 'success'
						})
					}
					this.getExamInfo()

				})
			},
			addGrade() { //添加信息

				this.d = true
			},
			//提交添加内容
			onSubmit() {
				this.d = false;
        var begin = this.examBegin

				axios({
					url: 'api/exam/add/'+begin,
					method: 'post',
					data: {
						...this.form1
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({ //成功修改提示
							message: '添加成功',
							type: 'success'
						})
					}
					this.getExamInfo()
				})
			},
			deleteRecord(examCode) {
				this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
					confirmButtonText: '确定删除',
					cancelButtonText: '算了,留着',
					type: 'danger'
				}).then(() => { //确认删除
					axios({
						url: `/api/exam/${examCode}`,
						method: 'get',
					}).then(res => {
						this.getExamInfo()
					})
				}).catch(() => {

				})
			},
			getExamInfo() { //分页查询所有试卷信息
				axios(`api/exams/page`, {
					params: {
						'keywords': this.keywords,
						'page': this.pagination.current,
						'size': this.pagination.size
					}
				}).then(res => {
					this.pagination = res.data
					console.log(res.data)
				}).catch(error => {})
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val
				this.getExamInfo()
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val
				this.getExamInfo()
			},
			showPaper(examCode) {
				this.showdialogVisible = true
				console.log("message :" + examCode);
				axios(`api/EP`, {
					params: {
						'keywords': examCode,
						'page': this.paginations.current,
						'size': this.paginations.size
					},
					method: 'get',
				}).then(res => {
					this.paginations = res.data
				}).catch(error => {})
			},
			editPaper(userId) {
				this.paperdialogVisible = true
				axios(`api/answer/page`, {
					params: {
						'keywords': userId,
						'page': this.paginationss.current,
						'size': this.paginationss.size
					}
				}).then(res => {
					this.paginationss = res.data
				}).catch(error => {})
			},
			pingFen: function(answerId,score) {
				axios('/api/questionapi/UpdateAnswer', {
						params: {
							'answerId': answerId,
							'score':score
						}
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.$message({ //成功修改提示
								message: '评分成功',
								type: 'success'
							})
						}
					})
					.catch(function(error) {
						console.log(error)
					})

			},
        // 获得得分
        handleChange(value) {
			}

		},
	};
</script>
<style lang="scss" scoped>
	.exam {
		padding: 0px 40px;

		.page {
			margin-top: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.edit {
			margin-left: 20px;
		}
	}
</style>
